<template>
  <div id="colorBlock_1">
    <el-table
        stripe
        :data="signInRecordTable.filter((v) => this.leach(v))"
        style="width: 98%;position: relative;top:5px;left: 1%;">
      <el-table-column
          prop="startTime"
          label="发布时间"
          width="150">
        <template slot-scope="scope">
          <span>
            {{format(scope.row.startTime)}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
          prop="groupName"
          label="发布群组">
      </el-table-column>

      <el-table-column
          width="150"
          label="签到状态">
        <template slot-scope="scope">
          <el-tag
              style="font-size: 15px;width: 60px;text-align: center"
              :type="statusType(scope.row)"
              disable-transitions>
            {{statusText(scope.row)}}
          </el-tag>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Finished",

  data() {
    return {
      signInRecordTable: [],//已完成的签到数据的数据数组
      loginId:sessionStorage.getItem("loginId"),//登录信息
    }
  },
  //页面数据初始化
  created() {
    request.get("/published/finished/"+this.loginId).then(res =>{
      console.log(res)
      this.signInRecordTable=res
    })
  },
  methods: {
    //数据展示过滤条件，只显示已发布签到
    leach(row) {
      return row.publishStatus!==0;
      // var result=JSON.parse(row.result.substring(10,(row.result).length-1))
      // for(var i=0;i<result.length; i++){
      //   if(result[i].user_id===this.$loginId){
      //     return result[i].sign_in_status !== 0;
      //   }
      // }
    },
    //时间数据格式转换
    format(startTime){
      return startTime[0]+'-'+
          (startTime[1]<10?'0'+startTime[1]:startTime[1])+'-'+
          (startTime[2]<10?'0'+startTime[2]:startTime[2])+' '+
          (startTime[3]<10?'0'+startTime[3]:startTime[3])+':'+
          (startTime[4]<10?'0'+startTime[4]:startTime[4])+':'+
          (startTime[5]<10?'0'+startTime[5]:startTime[5])
    },
    //根据签到状态显示不同标签颜色
    statusType(row){
      var result=JSON.parse(row.result.substring(10,(row.result).length-1))
      for(var i=0;i<result.length; i++){
        if(result[i].user_id===this.loginId){
          switch (result[i].sign_in_status){
            case 0:return 'danger'
            case '1':return 'success'
            case '2':return 'primary'
            case '3':return 'warning'
          }
        }
      }
    },
    //根据签到状态显示不同标签信息
    statusText(row){
      var result=JSON.parse(row.result.substring(10,(row.result).length-1))
      for(var i=0;i<result.length; i++){
        if(result[i].user_id===this.loginId){
          switch (result[i].sign_in_status){
            case 0:return '未签到'
            case '1':return '已签到'
            case '2':return '请假'
            case '3':return '迟到'
          }
        }
      }
    },
  },
}
</script>

<style scoped>
#colorBlock_1{
  background-color: rgba(255, 255, 255, 0.8);
  max-width: 550px;
  min-width: 400px;
  min-height: 700px;
  width: 99%;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 7%;
  border-radius: 10px;
  box-shadow: 2px 2px 3px rgba(192, 197, 194, 0.3);
}
</style>